<template>
  <div>
    <n-card :bordered="false" class="proCard">
      <n-form
        :label-width="200"
        :model="formValue"
        :rules="rules"
        label-placement="left"
        ref="formRef"
        class="py-8"
      >
        <n-grid cols="2" responsive="screen">
          <n-grid-item offset="0">
            <n-form-item label="登记人" path="registrant">
              <n-input disabled v-model:value="formValue.registrant" placeholder="登记人" />
            </n-form-item>
            <n-form-item label="班组名称" path="name">
              <n-input placeholder="班组名称" v-model:value="formValue.name" />
            </n-form-item>
            <n-form-item label="负责人" path="director">
              <n-input placeholder="负责人" v-model:value="formValue.director" />
            </n-form-item>
            <n-form-item label="身份证" path="id_card">
              <n-input v-model:value="formValue.id_card" placeholder="合同名称" />
            </n-form-item>
            <n-form-item label="性别" path="sex">
              <n-radio-group v-model:value="formValue.sex" name="is_model_houses">
                <n-space>
                  <n-radio :value="1">男</n-radio>
                  <n-radio :value="2">女</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="班组类别" path="type">
              <n-input v-model:value="formValue.type" placeholder="班组类别" />
            </n-form-item>
            <n-form-item label="是否有合作" path="is_cooperate">
              <n-radio-group v-model:value="formValue.is_cooperate" name="is_cooperate">
                <n-space>
                  <n-radio :value="1">是</n-radio>
                  <n-radio :value="2">否</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="工种人数" path="work_type_num">
              <n-input v-model:value="formValue.work_type_num" placeholder="工种人数" />
            </n-form-item>
          </n-grid-item>
          <n-grid-item offset="0">
            <n-form-item label="所属部门" path="department">
              <n-input disabled placeholder="所属部门" v-model:value="formValue.department" />
            </n-form-item>
            <n-form-item label="联系电话" path="contact_mobile">
              <n-input placeholder="联系电话" v-model:value="formValue.contact_mobile" />
            </n-form-item>
            <n-form-item label="出生日期" path="birthday">
              <n-date-picker type="date" v-model:value="formValue.birthday" style="width: 100%" />
            </n-form-item>
            <n-form-item label="常住地址" path="address">
              <n-input placeholder="常住地址" v-model:value="formValue.address" />
            </n-form-item>
            <n-form-item label="推荐级别" path="recommended">
              <n-input placeholder="推荐级别" v-model:value="formValue.recommended" />
            </n-form-item>
            <n-form-item label="是否签合同" path="is_contract">
              <n-radio-group v-model:value="formValue.is_contract" name="is_contract">
                <n-space>
                  <n-radio :value="1">是</n-radio>
                  <n-radio :value="2">否</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
          </n-grid-item>
        </n-grid>
        <n-form-item label="备注" path="remarks">
          <n-input v-model:value="formValue.remarks" placeholder="备注" type="textarea" />
        </n-form-item>
        <n-form-item label="附件上传" path="files">
          <uploadFiles
            action="https://example.com/upload"
            accept="image/*"
            multiple
            :limit="5"
            :maxFileSize="5"
            placeholder="点击或拖拽图片到此处上传（最多5张，每张不超过5MB）"
            v-model="formValue.files"
          />
        </n-form-item>
      </n-form>
    </n-card>
    <n-space justify="center">
      <n-button type="warning" @click="formSubmit">存草稿</n-button>
      <n-button type="primary" @click="formSubmit">提交</n-button>
      <n-button @click="resetForm">重置</n-button>
    </n-space>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, reactive, onMounted } from 'vue';
  import { useMessage } from 'naive-ui';
  import { ResultEnum } from '@/enums/httpEnum';
  import { getLaborTeam, patchLaborTeam, putLaborTeam } from '@/api/laborTeam/teamTeam';
  import { useRouter } from 'vue-router';
  import uploadFiles from '@/components/uploadFiles.vue';
  import { useUser } from '@/store/modules/user';
  const id: any = ref(useRouter().currentRoute.value.params.id);
  const userStore = useUser();
  const userInfo = userStore.getUserInfo;

  const rules = {
    name: {
      required: true,
      message: '请输入劳务班组名称',
      trigger: 'blur',
    },
    contact_mobile: {
      required: true,
      message: '请输入联系人电话',
      trigger: 'change',
    },
  };

  const formRef: any = ref(null);
  const message = useMessage();

  const defaultValueRef = () => ({
    id: 0,
    admin_id: 0,
    name: '',
    registrant: '',
    director: '',
    id_card: '',
    sex: 1,
    type: '',
    is_cooperate: '',
    work_type_num: '',
    contact_mobile: '',
    birthday: null,
    address: '',
    recommended: '',
    is_contract: '',
    remarks: '',
    files: '',
    department: '',
  });

  let formValue = reactive(defaultValueRef());
  function formSubmit() {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        let response: any = null;
        if (formValue.id == 0) {
          response = await putLaborTeam(formValue);
        } else {
          response = await patchLaborTeam(formValue);
        }

        if (response.code == ResultEnum.SUCCESS) {
          message.success('操作成功');
          formValue.id = response.data;
          getData();
        }
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  const getData = async () => {
    const response: any = await getLaborTeam(formValue.id);
    if (response.code === ResultEnum.SUCCESS) {
      response.data.price = parseFloat(response.data.price);
      response.data.sex = parseFloat(response.data.sex);
      response.data.is_contract = parseFloat(response.data.is_contract);
      response.data.is_cooperate = parseFloat(response.data.is_cooperate);
      Object.assign(formValue, response.data);
    }
  };

  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }

  onMounted(() => {
    formValue.id = id.value;
    formValue.id = id.value;
    formValue.admin_id = userInfo.id
    formValue.registrant = userInfo.name
    if (formValue.id != 0) {
      getData();
    }
  });
</script>
